<!DOCTYPE html>
<html>
<head>
    <title>{{.title}}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--防盗链视频显示-->
    <meta name="referrer" content="never">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <style>
        .tags span {
            display: inline-block;
        }

        .loading {
            display: none;
            position: fixed;
            z-index: 99999;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.5;
            top: 0;
            left: 0;
        }

        .loading-bar {
            position: absolute;
            left: 45%;
            top: 45%;
        }

        html, body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

<div class="loading">
    <div class=" loading-bar">
        <div class="spinner-border text-warning"></div>
    </div>
</div>

<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <form>
                <div class="input-group">
                    <input type="text" class="form-control" id="link" placeholder="粘贴视频链接开始解析">
                    <span class="input-group-text" onclick="parseVideo()">开始解析</span>
                    <span class="input-group-text" onclick="clearVideo()">清除</span>
                </div>
            </form>
        </div>
        <div class="col-12">
            <div class="mt-3 pb-2 text-center"><h3>已支持的平台</h3></p>
                <div class="row">
                    <div class="col-12 tags">
                        <span class="p-1 mb-2 bg-primary text-white rounded">抖音</span>
                        <span class="p-1 mb-2 bg-secondary text-white rounded">快手</span>
                        <span class="p-1 mb-2 bg-success text-white rounded">皮皮虾</span>
                        <!--                        <span class="p-1 mb-2 bg-danger text-white rounded">火山</span>-->
                        <span class="p-1 mb-2 bg-warning text-white rounded">微视</span>
                        <span class="p-1 mb-2 bg-info text-white rounded">微博</span>
                        <span class="p-1 mb-2 bg-success text-white rounded">开眼</span>
                        <span class="p-1 mb-2 bg-dark text-white rounded">陌陌</span>
                        <!--                        <span class="p-1 mb-2 bg-danger text-white rounded">小喀秀</span>-->
                        <span class="p-1 mb-2 bg-primary text-white rounded">全民K歌</span>
                        <span class="p-1 mb-2 bg-danger text-white rounded">最右</span>
                        <!--                        <span class="p-1 mb-2 bg-success text-white rounded">巴塞</span>-->
                    </div>
                </div>
            </div>
        </div>
<!--        <div class="col-12 pb-3">-->
<!--            <button type="button" class="btn btn-danger text-white col-12 rounded" style="display: none;" data-url=""-->
<!--                    id="download" onclick="downloadFile(this)">点击下载视频-->
<!--            </button>-->
<!--        </div>-->
        <div class="col-12 video-content" style="display: flex;justify-content: center;">
        </div>
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    function parseVideo() {
        var link = $("#link").val();
        if (link == "") {
            alert("链接不能为空");
            return false;
        }
        $('.loading').show();
        $("#download").attr("data-url", "");
        $.ajax({
            type: "post",
            url: "/api/parse",
            dataType: "json",
            data: {txt: link},
            success: function (ret) {
                if (ret.code == 500) {
                    alert(ret.msg);
                    $('.loading').hide();
                    return false;
                }

                $("#download").attr("data-url", ret.url);
                var videos = `
                    <video width="300" height="500" id="Video_urlPic_Main" controls autoplay style="background-color: black;border-radius: 3px;">
                        <source src="` + ret.url + `" type="video/mp4" id="Video_urlPic">
                        您的浏览器不支持Video标签。
                    </video>
                `
                $('.video-content').html(videos);
                $('.loading').hide();
                $("#download").show();
            }
        });
    }

    function clearVideo() {
        $('.video-content').html("");
        $("#link").val("");
        $("#download").hide();
    }

    function downloadFile(obj) {
        var url = $(obj).data("url")
        if (url == "") {
            alert("视频地址为空");
            return false;
        }
        download('/api/download', {url: url}, 'get')
        //window.location.href = "/download?url=" + url;
    }

    // Ajax 文件下载
    function download(url, data, method) {
        // 获取url和data
        if (url && data) {
            // data 是string或者array / object
            data = typeof data == 'string' ? data : jQuery.param(data);
            // 把参数组装成form的input
            var inputs = '';
            $.each(data.split('&'), function () {
                var pair = this.split('=');
                inputs += '<input type="hidden" name="' + pair[0] + '" value="' + pair[1] + '" />';
            });
            // request发送请求
            $('<form action="' + url + '" method="' + (method || 'post') + '">' + inputs + '</form>')
                .appendTo('body').submit().remove();
        }
    }
</script>

</body>
</html>